<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单</title>
  <script>
        function navigateToLink1() {
            window.location.href = "http://127.0.0.1:8080/static/Energy.html"; // 替换为第一个链接
        }

        function navigateToLink2() {
            window.location.href = "http://127.0.0.1:8080/static/Device.html"; // 替换为第二个链接
        }
        function navigateToLink3() {
            window.location.href = "http://127.0.0.1:8080/static/Logging.html"; // 替换为第一个链接
        }

        function navigateToLink4() {
            window.location.href = "http://127.0.0.1:8080/static/user.html"; // 替换为第二个链接
        }function navigateToLink5() {
            window.location.href = "http://127.0.0.1:8080/login"; // 替换为第一个链接
        }
    </script>
    <style>
    /* 整体样式 */
    body {
        font-family: 'Arial', sans-serif;
        margin: 1;
        padding: 30px;
        background-color: #f4f4f4;
        transition: background-color 0.5s ease;
    }

    body:hover {
        background-color: #e9e9e9;
    }

    /* 标题样式 */
    h1 {
        color: #333;
        text-align: center;
        margin-bottom: 40px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* 按钮容器样式 */
    .button-container {
        display: flex;
        flex-direction: column; /* 改为竖排排列 */
        align-items: center; /* 垂直居中（如果需要的话） */
        gap: 40px; /* 按钮之间的间距 */
        margin-bottom: 20px; /* 与下方内容保持一定间距 */
    }

    /* 按钮样式 */
    .button-container button {
        display: inline-block; /* 改为inline-block以便在flex容器中正确显示（虽然对于竖排来说不是必需的） */
        width: 200px;
        padding: 20px;
        background-color: #007BFF;
        color: #fff;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        transition: background 0.3s ease, transform 0.3s ease;
    }

    .button-container button:hover {
        background-color: #0056b3; /* 悬停时的背景颜色 */
        transform: scale(1.05); /* 放大效果 */
    }

    .button-container button:active {
        transform: scale(0.95); /* 点击时的缩小效果 */
    }
</style>
</head>
<body>
<div class="container">
    <h1>菜单</h1>
    <div class="button-container">
    <button onclick="navigateToLink1()">能耗管理</button>
    <button onclick="navigateToLink2()">设备管理</button>
    <button onclick="navigateToLink3()">日志记录</button>
    <button onclick="navigateToLink4()">用户管理</button>
    <button onclick="navigateToLink5()">退出登录</button>
    </div>
</div>
</body>
</html>